<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix='sec' uri='http://www.springframework.org/security/tags'%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript" src="scripts/boot.js"></script>
<style type="text/css">
	.item{
		width: 95px;
		display: inline-block;
		margin-left: 5px;
	}
</style>
</head>
<body style="border: 0px; margin: 0px; padding: 0px;width: 100%;height: 100%">
	<div class="mini-toolbar" style="border-bottom:0;padding:0px;">
		<table width="100%" border="0">
			 <tr>
			    <td style="width:30%;">
			      <span class="item">时间(开始时间)：</span>
			      <input id="startTime" class="mini-datepicker" emptyText="请选择..." style="width:160px;" format="yyyy-MM-dd H:mm:ss" timeFormat="H:mm:ss" showTime="true" allowInput="false" onenter="onKeyEnter"/>
			    </td>
			    <td style="width:30%;">
			      <span class="item">时间(截止时间)：</span>
			      <input id="endTime" class="mini-datepicker" emptyText="请选择截..." style="width:160px;" format="yyyy-MM-dd H:mm:ss" timeFormat="H:mm:ss" showTime="true" allowInput="false" onenter="onKeyEnter"/>
			    </td>
			    <td style="width:30%;">
			      <span class="item">是否接起(精确)：</span>
			      <input id="whetherAnswer" nullItemText="全部" emptyText="请选择..." class="mini-combobox" emptyText="请选择" showNullItem="true" style="width:160px;" textField="text" valueField="id" data="[{ id: '0', text: '未接起' }, { id: '1', text: '已接起'}]"/>
			    </td>
			    <td style="width:30%;"> </td>
			 </tr>
			 <tr>
			    <td style="width:30%;">
			      <span class="item">中心：</span>
			      <input id="cur_ser_center" emptyText="请选择..." showNullItem="true" nullItemText="全部" class="mini-combobox" style="width:160px;" textField="name" valueField="id" onvaluechanged="onCenterChanged" url="sms_find_center.do" />
			    </td>
			    <td style="width:30%;">
			      <span class="item">话务组：</span>
			      <input id="cur_ser_group" emptyText="请先选择中心" class="mini-combobox" emptyText="请先选择中心" style="width:160px;" textField="name" valueField="id" onvaluechanged="onDeptChanged" />	
			    </td>
			    <td style="width:30%;">
			      <span class="item">接线坐席：</span>
			      <input id="answerSeat" emptyText="请先选择话务组" class="mini-combobox" emptyText="请先选择组" style="width:160px;" textField="name" valueField="id"/>
			   	</td>
			    <td style="width:30%;"> </td>
			 </tr>
			 <tr>
			   	<td style="width:30%;">
			   	  <span class="item">分机号(精确)：</span>
			      <input id="phoneExtNum" class="mini-textbox" emptyText="请输入分机号码"  onenter="onKeyEnter" style="width:160px;"/>
			    </td>
			    <td style="width:30%;">
			      <span class="item">外线号码(精确)：</span>
			      <input id="outsideNum" class="mini-textbox" emptyText="请输入外线号码"  onenter="onKeyEnter" style="width:160px;"/>
			    </td>
			    <td style="width:30%;">
			      <span class="item">地址市(精确)：</span>
			      <input id="city" class="mini-textbox" emptyText="请输入城市名"  onenter="onKeyEnter" style="width:160px;"/>
			    </td>
			    <td style="width:30%;"> </td>
			 </tr>
			 <tr>
			   	<td style="width:30%;">
			   	  <span class="item">呼入电话(模糊)</span>
			      <input id="callerNum" class="mini-textbox" emptyText="请输入电话号码"  onenter="onKeyEnter" style="width:160px;"/>
			    </td>
			    <td style="width:30%;" colspan="2"> </td>
			    <td style="white-space:nowrap;"><a class="mini-button" iconCls="icon-search" onclick="search()">查询</a> </td>
			 </tr>
		</table>          
	</div>
	<div class="mini-toolbar" style="border-bottom:0;padding:0px;">
	    <table style="width:100%;">
	        <tr>
	            <td style="width:100%;">
	            	<sec:authorize url='/call_details_current_export.do'>
	                <a class="mini-button" iconCls="icon-download" onclick="exportCurrentData()">导出当前</a>
	                </sec:authorize>
	                <sec:authorize url='/call_details_export.do'>
		            <a class="mini-button" iconCls="icon-download" onclick="exportData()">导出全部</a>  
		            </sec:authorize>     
	            </td>
	        </tr>
	    </table>           
	</div>
	<div class="mini-fit" >
	<div id="datagrid1" class="mini-datagrid " idField="id" pageSize="20" url="call_details_view.do" style="width:100%;height:100%;">
		<div property="columns">
			<div type="indexcolumn"></div>
			<div field="serialNum" width="100" headerAlign="center" align="center">编号</div>
			<div field="outsideNum" width="100" headerAlign="center" align="center">外线号码</div>
			<div field="callerNum" width="100" headerAlign="center" align="center">呼入电话</div>
			<div field="callerTime" width="130" headerAlign="center" allowSort="true" dateFormat="yyyy-MM-dd HH:mm:ss" align="center">时间</div>
			<div field="phoneExtNum" width="100" headerAlign="center" align="center">分机号</div>
			<div field="whetherAnswer" width="60" headerAlign="center" align="center">是否接起</div>
			<div field="callLength" width="80" headerAlign="center" align="center">呼叫时长</div>
			<div field="seatName" width="70" headerAlign="center" align="center">接线坐席</div>
			<div field="ordersCount" width="100" headerAlign="center" align="center">订单数</div>
			<div field="province" width="130" headerAlign="center" align="center">地址省</div>
			<div field="city" width="100" headerAlign="center" align="center">地址市</div>
			<div field="remark" width="160" headerAlign="center" align="center">备注</div>
		</div>
	</div>
	</div>
<script type="text/javascript">
mini.parse();
var grid = mini.get("datagrid1");
grid.load();

function search() {
	var startTime = mini.get("startTime").getFormValue();
	var endTime = mini.get("endTime").getFormValue();
	var answerSeat = mini.get("answerSeat").getValue();
	var whetherAnswer = mini.get("whetherAnswer").getValue();
	var callerNum = mini.get("callerNum").getValue();
	var phoneExtNum = mini.get("phoneExtNum").getValue();
	var outsideNum = mini.get("outsideNum").getValue();
	var city = mini.get("city").getValue();
    grid.load({ 
    	startTime: startTime ,
    	endTime: endTime ,
    	answerSeat: answerSeat ,
    	whetherAnswer: whetherAnswer ,
    	callerNum: callerNum ,
    	phoneExtNum: phoneExtNum,
    	outsideNum: outsideNum,
    	city: city
    	});
}

function onKeyEnter(e) {
    search();
}

//导出全部
function exportData() {
	location.href="call_details_export.do";
}

//导出当前页数据
function exportCurrentData() {
	var data =grid.getData();
	var ids = [];
	$.each(data , function(){
        ids.push(this.id);
    });
	 var id = ids.join(',');
	 location.href="call_details_current_export.do?ids=" +id;
}

function onDeptChanged(e) {
	var curSer = mini.get("answerSeat");
	curSer.setValue("");
    var url = "sms_cur_ser.do?groupId=" + e.value;
    curSer.setUrl(url);
}

function onCenterChanged(e){
	var curSer = mini.get("answerSeat");
	curSer.setValue("");
	var url = "sms_find_group.do?centerId=" + e.value;
	var curGroup = mini.get("cur_ser_group");
	curGroup.setValue("");
	curGroup.setUrl(url);
}
</script>
</body>
</html>